import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import RaPair 1.0
// import SerialPortInfo.singleton 1.0
import utils 1.0

Item {
    GroupBox {
        anchors.centerIn: parent
        width: 550
        height: 460
        anchors.margins: 50
        title: "RA Pairing"

        ColumnLayout {
            anchors.centerIn: parent
            spacing: 20
            RowLayout { // 选择串口
                spacing: 20
                Layout.fillWidth: true
                Layout.preferredHeight: 35
                // Layout.maximumHeight: 35
                ComboBox {
                    id: portComboBox
                    Layout.preferredWidth: 200
                    Layout.preferredHeight: 35
                    model: SerialPortInfo.serialPorts
                    currentIndex: 0
                    delegate: ItemDelegate {
                        text: modelData.portName + " - " + modelData.description
                        width: parent.width
                        height: 30
                        highlighted: ListView.isCurrentItem
                        onClicked: {
                            portComboBox.currentIndex = index
                            portComboBox.popup.close()
                            console.log("Selected port:", index)
                        }
                    }
                    // 选择要显示的文本
                    textRole: "portName"
                }

                Button {
                    Layout.preferredWidth: 80
                    Layout.preferredHeight: 42
                    text: raPair.portState === RaPair.SerialPortState.Closed ? "Open" : "Close"
                    onClicked: {
                        if (raPair.portState === RaPair.SerialPortState.Opened) {
                            raPair.closeSerialPort()
                        } else {
                            raPair.openSerialPort(portComboBox.currentText)
                        }
                    }

                }
                Item { // 占位符，会占据所有剩余空间
                    Layout.fillWidth: true
                }
                CheckBox {
                    id: autoQueryCheckBox
                    Layout.preferredWidth: 110
                    Layout.alignment: Qt.AlignRight
                    text: "AutoQuery"
                    checked: true
                }
            }

            RowLayout { // 设置 Lora ID 和 Region
                Layout.fillWidth: true
                Layout.preferredHeight: 30
                spacing: 20
                RowLayout{
                    spacing: 10
                    // Layout.preferredWidth: 290
                    Layout.fillHeight: true
                    Label {
                        text: "Lora ID:"
                        Layout.preferredHeight: 30
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
                    }
                    TextField {
                        id: loraIdTextField
                        Layout.preferredWidth: 150
                        Layout.preferredHeight: 30
                        leftPadding: 5
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                        placeholderText: "Enter Lora ID"
                        // inputMethodHints: Qt.ImhDigitsOnly
                        // validator: IntValidator { bottom: 100000000; top: 999999999 }
                    }
                }

                RowLayout {
                    spacing: 10
                    Layout.fillHeight: true
                    Label {
                        text: "Region:"
                        Layout.preferredHeight: 30
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
                    }
                    ComboBox {
                        id: regionComboBox
                        Layout.preferredWidth: 150
                        Layout.preferredHeight: 30
                        model: ["EU", "NA", "AU"]
                    }
                }

                Button {
                    Layout.preferredWidth: 60
                    Layout.fillHeight: true
                    enabled: loraIdTextField.text !== "" && regionComboBox.currentText !== "" && raPair.portState === RaPair.SerialPortState.Opened
                    text: "Set"
                    onClicked: {
                        let loraId = loraIdTextField.text
                        let region = regionComboBox.currentIndex
                        console.log("Setting Lora ID:", loraId, "Region:", region)
                        raPair.setLoraID(loraId)
                        raPair.setRegion(region)
                        if (autoQueryCheckBox.checked) {
                            raPair.getLoraID()
                            raPair.getRegion()
                        }
                    }
                }
            }

            RowLayout { // 读取 Lora ID 和 Region
                Layout.fillWidth: true
                Layout.preferredHeight: 30
                spacing: 20
                RowLayout{
                    spacing: 10
                    Layout.fillHeight: true
                    Label {
                        text: "Lora ID:"
                        Layout.preferredHeight: 30
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
                    }
                    TextField {
                        id: currentLoraIdTextField
                        Layout.preferredWidth: 150
                        Layout.preferredHeight: 30

                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter

                        readOnly: true
                        placeholderText: "Current Lora ID"
                        leftPadding: 5
                        inputMethodHints: Qt.ImhDigitsOnly
                        validator: IntValidator { bottom: 100000000; top: 999999999 }
                    }
                }

                RowLayout {
                    spacing: 10
                    Layout.fillHeight: true
                    Label {
                        text: "Region:"
                        Layout.preferredHeight: 30
                        horizontalAlignment: Text.AlignRight
                        verticalAlignment: Text.AlignVCenter
                    }
                    TextField {
                        id: currentRegionTextField
                        Layout.preferredWidth: 150
                        Layout.preferredHeight: 30
                        readOnly: true
                        placeholderText: "Current Region"
                        leftPadding: 5
                        horizontalAlignment: Text.AlignLeft
                        verticalAlignment: Text.AlignVCenter
                    }
                }

                Button {
                    Layout.preferredWidth: 60
                    Layout.fillHeight: true
                    text: "Get"
                    enabled: raPair.portState === RaPair.SerialPortState.Opened
                    onClicked: {
                        raPair.getLoraID()
                        raPair.getRegion()
                    }
                }
            }

            ColumnLayout {
                Layout.fillWidth: true
                Layout.fillHeight: true
                Label {
                    text: "Log:"
                    Layout.preferredHeight: 20
                    horizontalAlignment: Text.AlignLeft
                    verticalAlignment: Text.AlignVCenter
                }
                ScrollView {
                    Layout.fillWidth: true
                    Layout.preferredHeight: 240

                    TextArea {
                        id: logTextArea
                        anchors.fill: parent
                        readOnly: true
                        // wrapMode: TextArea.WrapAtWordBoundaryOrAnywhere
                    }
                }
            }

        }
    }

    RaPair {
        id: raPair
        onSerialPortStateChanged: function(state) {
            //
            console.log("Serial port state changed:", state)
            console.log("Closed", RaPair.SerialPortState.Closed, "Opened", RaPair.SerialPortState.Opened)
            console.log("portState:", portState)
        }
        onDataReceived: function(data) {
            logTextArea.append(data)
            logTextArea.cursorPosition = logTextArea.text.length
        }

        onLoraIdReceived: function(loraId) {
            currentLoraIdTextField.text = loraId
        }
        onRegionReceived: function(region) {
            currentRegionTextField.text = region
        }
    }
}